<template>
  <!-- 公告详情 -->
  <div class="notice">
    <!-- 标题 -->
    <div class="notice-top">
      <div class="notice-title">
        公告标题公告标题公告标题公告标题公告标题 公告标题公告标题公告
      </div>
      <div class="notice-submitter">
        <div class="submitter-name">奥德曼奥德曼奥德曼奥</div>
        <div class="submitter-time">2021/03/23 12:22</div>
      </div>
    </div>
    <!-- 富文本内容 -->
    <div></div>
    <!-- 地图 -->
    <div class="location">
      <div class="map-details">
        <img :src="mapImg" alt="" />
        <div class="details">
          <div class="location-img">
            <img :src="detailsImg" alt="" />
          </div>
          <div class="detailed-area">
            <div class="region">{{ specificName }}</div>
            <div class="detailed-region">{{ regionName }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 名片 -->
    <div class="business-conter">
      <div class="business-card-num">
        <div><img :src="businessCard" alt="" /></div>
        <div class="business-num">个人名片({{ number }})</div>
      </div>
      <div class="business-card">
        <div
          class="business-card-list"
          v-for="item in businessList"
          :key="item.id"
        >
          <div class="business-img"><img :src="item.avtive" alt="" /></div>
          <div class="business-inf">
            <div class="userName">{{ item.userName }}</div>
            <div class="compantName">{{ item.compantName }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 附件 -->
    <div class="enclosure">
      <div class="enclosure-num">
        <div><img :src="enclosuerImg" alt="" /></div>
        <div class="fileNum">附件({{ fileNum }})</div>
      </div>
      <div class="list-of-attachments">
        <div
          class="enclosure-list"
          v-for="(item, index) in newList"
          :key="index"
        >
          <div class="enclosure-format">
            <img :src="fileImg.ppt" alt="" v-if="item.fileType === 'ppt'" />
            <img :src="fileImg.xlsx" alt="" v-if="item.fileType === 'xlsx'" />
            <img :src="fileImg.pdf" alt="" v-if="item.fileType === 'pdf'" />
            <img :src="fileImg.docx" alt="" v-if="item.fileType === 'docx'" />
            <img :src="fileImg.mp4" alt="" v-if="item.fileType === 'mp4'" />
            <img :src="fileImg.other" alt="" v-if="item.fileType === 'other'" />
            <img :src="fileImg.png" alt="" v-if="item.fileType === 'png'" />
            <img :src="fileImg.zip" alt="" v-if="item.fileType === 'zip'" />
          </div>
          <div class="enclosure-inf0-more">
            <div class="enclosure-info">
              <div class="enclosure-name">{{ item.name }}</div>
              <div class="enclosure-size">{{ item.size }}</div>
            </div>
            <div class="enclosure-more"><img :src="moreImg" alt="" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "noticeDetails",
  data() {
    return {
      mapImg: require("@/assets/map.png"), // 地图背景
      detailsImg: require("@/assets/location.png"), // 定位
      specificName: "曹家渡路曹家渡路曹家渡路曹家曹家渡路曹家渡路",
      regionName: "浦东新区浦东新区浦东新区浦东新区浦东浦东新区浦",
      businessCard: require("@/assets/business-card.png"), // 名片
      enclosuerImg: require("@/assets/upload-img.png"), // 附件
      moreImg: require("@/assets/more.png"), // 附件
      businessList: [
        {
          avtive: require("@/assets/map.png"),
          userName: "杰克森",
          compantName: "分木信息科技",
        },
        {
          avtive: require("@/assets/map.png"),
          userName: "杰克森斯基",
          compantName: "分木信息科技信息",
        },
        {
          avtive: require("@/assets/map.png"),
          userName: "杰克森斯基",
          compantName: "分木信息科技信息",
        },
        {
          avtive: require("@/assets/map.png"),
          userName: "杰克森斯基",
          compantName: "分木信息科技信息",
        },
      ],
      number: 4,
      fileNum: 2,
      enclosureList: [
        {
          name: "sdasdsadsddasda.ppt",
          size: "2200kb",
        },
        {
          name: "sdasdsadsddasda.xlsx",
          size: "22kb",
        },
        {
          name: "sdasdsadsddasda.pdf",
          size: "200kb",
        },
        {
          name: "sdasdsadsddasda.other",
          size: "20kb",
        },
      ],
      fileImg: {
        ppt: require("@/assets/ppt-img.png"), // ppt
        xlsx: require("@/assets/xlsx-img.png"), // xlsx
        pdf: require("@/assets/pdf-img.png"), // pdf
        docx: require("@/assets/docx-img.png"), // docx
        mp4: require("@/assets/video-img.png"), // mp4
        other: require("@/assets/other-img.png"), // other
        png: require("@/assets/img-img.png"), // 图片文件
        zip: require("@/assets/zip-img.png"), // 压缩
      },
      newList: [],
    };
  },
  created() {
    this.attachments();
  },
  methods: {
    attachments() {
      this.enclosureList.map((res) => {
        const fileType = res.name.split(".");
        this.newList.push({
          name: res.name,
          size: res.size,
          fileType: fileType[1],
        });
        console.log(this.newList, "1111");
      });
    },
  },
};
</script>
<style lang="less" scoped>
.notice {
  margin-top: 6px;
  padding: 0 16px;
  height: 100%;
}
.notice-title {
  font-size: 17px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #03111b;
  line-height: 21px;
}
.notice-submitter {
  display: flex;
  align-items: center;
  margin-top: 9px;
  .submitter-name {
    font-size: 13px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #9ca1a5;
    line-height: 16px;
  }
  .submitter-time {
    font-size: 13px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #9ca1a5;
    margin-left: 12px;
    line-height: 16px;
  }
}
// 地图
.location {
  margin-top: 16px;
}
.map-details {
  background-color: #ffffff;
  box-shadow: 0px 0px 2px 0px #d2e2ee;
  border-radius: 5px;
  position: relative;
  img {
    width: 100%;
  }
  .details {
    display: flex;
    align-items: center;
    height: 70px;
    .location-img {
      margin-left: 16px;
      img {
        width: 14px;
        height: 16px;
      }
    }
    .detailed-area {
      margin-left: 12px;
      div {
        overflow: hidden; /*超出部分隐藏*/
        white-space: nowrap; /*不换行*/
        text-overflow: ellipsis; /*超出部分文字以...显示*/
        width: 285px;
      }
      .region {
        font-size: 17px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #03111b;
        line-height: 21px;
      }
      .detailed-region {
        font-size: 14px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #9ca1a5;
        line-height: 17px;
        padding-top: 4px;
      }
    }
  }
}
// 名片
.business-conter {
  .business-card-num {
    display: flex;
    align-items: center;
    margin-top: 18px;
    img {
      width: 14px;
      height: 11px;
    }
    .business-num {
      font-size: 14px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #9ca1a5;
      line-height: 18px;
      margin-left: 6px;
    }
  }
  .business-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .business-card .business-card-list:nth-child(2) {
    margin-left: -9px;
  }
  .business-card-list {
    width: 166px;
    height: 60px;
    background: #ffffff;
    box-shadow: 0px 0px 2px 0px #d2e2ee;
    border-radius: 6px;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 11px;
  }
  .business-img {
    margin-left: 10px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 5px;
    }
  }
  .business-inf {
    margin-left: 8px;
    margin-top: -4px;
    width: 100px;
    .userName {
      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*不换行*/
      text-overflow: ellipsis; /*超出部分文字以...显示*/
      font-size: 16px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #03111b;
      line-height: 20px;
    }
    .compantName {
      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*不换行*/
      text-overflow: ellipsis; /*超出部分文字以...显示*/
      font-size: 13px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #9ca1a5;
      margin-top: 4px;
      line-height: 17px;
    }
  }
}
// 附件
.enclosure {
  margin-top: 18px;
  .enclosure-num {
    display: flex;
    align-items: center;
    img {
      width: 14px;
      height: 12px;
    }
    .fileNum {
      font-size: 14px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #9ca1a5;
      line-height: 18px;
      margin-left: 6px;
    }
  }
}
.enclosure-list {
  display: flex;
  margin-top: 16px;
  flex: 1;
  width: 100%;
}
.enclosure-inf0-more {
  display: flex;
  border-bottom: 1px solid #ebebeb;
  width: 100%;
  padding-bottom: 11px;
}
.enclosure-info {
  margin-left: 12px;
}
.enclosure-more {
  position: absolute;
  right: 16px;
  img {
    width: 20px;
    height: 4px;
  }
}
.enclosure-name {
  width: 267px;
  height: 20px;
  font-size: 16px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #03111b;
  line-height: 20px;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
.enclosure-size {
  width: 42px;
  height: 17px;
  font-size: 13px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #9ca1a5;
  line-height: 17px;
  margin-top: 4px;
}
.enclosure-format {
  img {
    width: 32px;
    height: 40px;
  }
}
</style>